import { useEffect, useState } from "react";
import store, { increment, decrement } from "./redux";

function App() {
  const count = store.getState();

  const handleIncrement = () => {
    // 调用dispatch，触发reducer，最终更新redux数据
    // 默认数据都不是响应式，数据的确更新了，用户界面不会更新
    store.dispatch(increment());
  };

  const handleDecrement = () => {
    store.dispatch(decrement());
  };

  const [state, setState] = useState(0);

  useEffect(() => {
    const listener = () => {
      // 调用setXxx方法，用户界面就会更新
      // 注意：需要更新的值不同，用户界面就会更新
      // 如果更新的值前后相等，用户界面不会更新
      // setState(100);
      setState(state + 1);
    };

    // 当redux管理的数据发生变化，就会触发listener函数
    // listener中需要重新渲染组件（setState），用户界面才会更新
    // subscribe可以绑定n个回调函数
    const unsubscribe = store.subscribe(listener);

    return () => {
      // 解绑
      unsubscribe();
    };
  }, [state]);

  return (
    <div>
      <p>clicked: {count} times</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default App;
